<template>
    <div>
        <div class="container">
            <el-main>
                <div class="handle-box">
                    <span><h3>{{memberDrawerFormHeadTitle}}</h3></span>
                </div>
                <el-form ref="sysMemberFormRef" :rules="sysMemberFormRules" :model="sysMemberForm" :label-width="formLabelWidth">
                    <el-form-item label="ID" prop="id" v-if="false">
                        <el-input v-model="sysMemberForm.id" />
                    </el-form-item>
                    <el-form-item label="管理员类型" prop="issys">
                        <el-input v-model="sysMemberForm.issys" clearable class="handle-input mr10" v-if="false"/>
                        <el-select v-model="sysMemberForm.issys" class="handle-select mr10" placeholder="请选择">
                            <el-option v-for="item in isSysOpts" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
					<!-- 常规信息 -->
                    <el-form-item label="管理员名称(英字)" prop="username">
                        <el-input v-model="sysMemberForm.username" clearable class="handle-input mr10" maxlength="25" />
                    </el-form-item>
                    <el-form-item label="管理员昵称" prop="nickname">
                        <el-input v-model="sysMemberForm.nickname" clearable class="handle-input mr10" maxlength="25" />
                    </el-form-item>
                    <el-form-item label="管理员手机号/ 登陆账号" prop="phone">
                        <el-input v-model="sysMemberForm.phone" clearable class="handle-input mr10" maxlength="11" show-word-limit/>
                    </el-form-item>
                    <el-form-item label="登录密码" prop="password">
                        <el-input type="password" v-model="sysMemberForm.password" placeholder="请输入密码" clearable show-password class="handle-input mr10" />
                    </el-form-item>
                    <el-form-item label="管理员性别" prop="gender">
                        <el-select v-model="sysMemberForm.gender" class="handle-select mr10" placeholder="请选择">
                            <el-option v-for="item in genderOpts" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-main>
			<el-footer>
                <el-button type="primary" @click="func_onSubmit" plain>保存数据</el-button>
                <el-button type="success" @click="func_onReset" plain>重置表单</el-button>
                <el-button @click="func_closeDialog" plain>取 消</el-button>
			</el-footer>
        </div>
    </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { fetchMemberInfoData, addSysMember, saveSysMember } from "../../../api/uc";

import { NO_DATA_SELECT_ERROR, SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_DELDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE } from "../../../api/CommonErrorMessage.js";

export default {
    name: "sysMemberForm",
	props:{
        selectValue: Object,
	},
    emits: ["sysMemberData"],
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();
        const formLabelWidth = ref("170px");
        const memberDrawerFormHeadTitle = ref("");
		/**
         * @name 定义业务表单
         */
        const getInitFormData = () => {
            return {
				birthday: '',
				channel: 0,
				city: '',
				createTime: '',
				educationBackground: '',
				feature: '',
				gender: 0,
				icon: '',
				id: 0,
				integral: 0,
				issys: 0,
				job: '',
				lastHairTime: '',
				longHair: '',
				managerStatus: 0,
				nextPreHairTime: '',
				nickname: '',
				openvip: 0,
				password: '',
				personalizedSignature: '',
				phone: '',
				sourceType: 0,
				status: 0,
				username: '',
				wechatOpenId: ''
            }
        };
        /**
         * @name 表单初始化
         */
        const resetSysMemberForm = () => {
            Object.assign(sysMemberForm, getInitFormData());
            sortNum.value = 1;
        };
		// 新闻资讯表单数据
        const sysMemberForm = reactive(getInitFormData());
        const sysMemberFormRef = ref(null);
        const sysMemberFormRules = {
            advLink: [
                { required: true, message: "请输入管理员账号", trigger: "blur" },
            ],
            advName: [
                { required: true, message: "请输入管理员名称", trigger: "blur" },
            ],
        };
        const sortNum = ref(0);
        const loadDataFlg = ref(false);
        let isSysOpts = ref([
            {
                label: "普通用户",
                value: 0
            },
            {
                label: "管理员",
                value: 1
            },
            {
                label: "超级管理员",
                value: 2
            }
        ]);
        let genderOpts = ref([
            {
                label: "男",
                value: 1
            },
            {
                label: "女",
                value: 0
            }
        ]);
        let status_Opts = ref([
            {
                label: "停用",
                value: 2002
            },
            {
                label: "启用",
                value: 2001
            }
        ]);
        // =========================================================================================================
        // 提交
        const func_onSubmit = () => {
            sysMemberForm['sort'] = sortNum;
            // 表单校验
            sysMemberFormRef.value.validate((valid) => {
                if (valid) {
                    if(loadDataFlg.value){
                        saveSysMember(sysMemberForm).then((res) => {
                            if(res.code != 200) {
                                if(res.type == 0) {
                                    ElMessage.warning(res.message);
                                } else {
                                    ElMessage.error(res.message);
                                }
                            } else {
                                ElMessage.success(SUCCESS_EDITDATA_DIALOG_MESSAGE);
                                cex.emit('sysMemberData', {state: 1, data: []});
                            }
                        });
                    } else {
                        addSysMember(sysMemberForm).then((res) => {
                            if(res.code != 200) {
                                if(res.type == 0) {
                                    ElMessage.warning(res.message);
                                } else {
                                    ElMessage.error(res.message);
                                }
                            } else {
                                ElMessage.success(SUCCESS_ADDDATA_DIALOG_MESSAGE);
                                cex.emit('sysMemberData', {state: 1, data: []});
                            }
                        });
                    }
                    resetSysMemberForm();
                } else {
                    return false;
                }
            });
        };
        // 重置
        const func_onReset = () => {
            resetSysMemberForm();
        };
        const func_closeDialog = () => {
            cex.emit('sysMemberData', {state: 1, data: []});
        };
        const func_onload = (v) =>{
            fetchMemberInfoData(v).then((res) => {
                if(res.code === 200) {
                    Object.keys(res.data).forEach((item) => {
                        sysMemberForm[item] = res.data[item];
                    });
                }
            });
        }
        // =========================================================================================
        // 业务数据监听
        watch(() => props.selectValue, (val) => {
            console.log("dashabi",val['load']);
			if(val['load']){
                memberDrawerFormHeadTitle.value = "编辑用户";
                func_onload(val['id']);
			} else {
                memberDrawerFormHeadTitle.value = "注册平台用户";
                resetSysMemberForm();
            }
            loadDataFlg.value = val['load'];
        },{deep: true,immediate: true});
        // =========================================================================================================
        return {
			// 系统变量
            formLabelWidth, memberDrawerFormHeadTitle, isSysOpts, status_Opts, genderOpts,
            sysMemberForm, sysMemberFormRef, sysMemberFormRules, sortNum, loadDataFlg,
            func_onload,
			// 主业务调用方法
            getInitFormData, resetSysMemberForm, func_onSubmit, func_onReset, func_closeDialog,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 300px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
</style>